<template>
  <view class="select-box">
    <view class="start" @click="startPointVisible = true">
      <text v-if="!startPoint.id">您在哪上车？</text>
      <template v-else>
        <text>您将从</text>
        <view class="start-point-text">{{ startPoint.name }}</view>
        <text>上车</text>
      </template>
    </view>
    <view class="end" @click="endPointVisible = true">
      <text>您要去哪儿？</text>
    </view>
  </view>
  <PointList v-model:visible="startPointVisible" @change="handleChangeStart"/>
  <PointList v-model:visible="endPointVisible" @change="handleChangeEnd"/>
</template>
<script setup>
import { computed, ref, watch } from 'vue'
import { useStore } from 'vuex'
import PointList from './PointList.vue'

const $emits = defineEmits(['confirm'])
const $store = useStore()
let startPointVisible = ref(false)
let startPoint = ref({})
let endPointVisible = ref(false)
let endPoint = ref({})
let city = computed(() => $store.state.city)

watch(city, () => {
  startPoint.value = {}
  endPoint.value = {}
})
const handleChangeStart = (item) => {
  startPoint.value = item
  endPoint.value = {}
}
const handleChangeEnd = (item) => {
  endPoint.value = item
  if (startPoint.value.id) {
    $emits('confirm', startPoint.value, endPoint.value)
  }
}
</script>
<style lang="scss" scoped>
.select-box {
  background: $uni-bg-color;
  border-radius: $uni-border-radius-lg;
  bottom: 100rpx;
  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
  left: $uni-spacing-row-max;
  padding: $uni-spacing-row-max;
  position: fixed;
  right: $uni-spacing-row-max;
  z-index: 9;
}

.start {
  align-items: center;
  display: flex;
  font-size: $uni-font-size-base;
  height: 60rpx;
  margin-bottom: $uni-spacing-big;
  padding: 0 $uni-spacing-lg;

  &::before {
    background: #19c235;
    border-radius: 50%;
    content: '';
    display: block;
    height: 10rpx;
    margin-right: $uni-spacing-row-base;
    width: 10rpx;

  }
}

.start-point-text {
  color: $uni-color-primary;
  font-weight: bold;
  margin: 0 $uni-spacing-sm;
  max-width: 400rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.end {
  align-items: center;
  background: #eee;
  border-radius: $uni-border-radius-base;
  display: flex;
  font-size: $uni-font-size-lg;
  height: 70rpx;
  line-height: 70rpx;
  padding: 0 $uni-spacing-lg;

  &::before {
    background: #f0ad4e;
    border-radius: 50%;
    content: '';
    display: block;
    height: 10rpx;
    margin-right: $uni-spacing-row-base;
    width: 10rpx;

  }
}
</style>
